<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">个人信息</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/">个人资料</a>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <p class="see_css">变更记录>查看</p>
    <!-- 下面的变更记录 -->
    <div class="record_css">
      <el-row>
        <!-- 左边大列 -->
        <el-col :span="18">
          <div class>
            <!-- 第一部分 -->
            <div>
              <!-- 第一行 -->
              <el-row>
                <el-col :span="18">
                  <h4>专技人员基本信息</h4>
                </el-col>
              </el-row>
              <!-- 第二行 -->
              <el-row>
                <el-col :span="6">
                  <div class="fontDiv">
                    <span>姓名</span>
                    <span>武则天</span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="fontDiv">
                    <span>身份证</span>
                    <span>230521199601202010</span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="fontDiv">
                    <span>毕业院校</span>
                    <span>xxx</span>
                  </div>
                </el-col>
              </el-row>
              <!-- 第三行 -->
              <el-row>
                <el-col :span="6">
                  <div class="fontDiv">
                    <span>性别</span>

                    <span>女</span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="fontDiv">
                    <span>最高学历</span>
                    <span>本科</span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="fontDiv">
                    <span>所学专业</span>
                    <span>技术员</span>
                  </div>
                </el-col>
              </el-row>
              <!-- 第四行 -->
              <el-row>
                <el-col :span="6">
                  <div class="fontDiv">
                    <span>毕业时间</span>
                    <span>202020</span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="fontDiv">
                    <span>手机号码</span>
                    <span>13600000000</span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="fontDiv">
                    <span>电子邮箱</span>
                    <span>10086@qq.com</span>
                  </div>
                </el-col>
              </el-row>
            </div>
            <!-- 第二部分 -->
            <div>
              <!-- 第一行 -->
              <el-row>
                <el-col :span="18">
                  <h4>专技人员工作信息</h4>
                </el-col>
              </el-row>
              <!-- 第二行 -->
              <el-row>
                <el-col :span="6">
                  <div class="fontDiv">
                    <span>所在单位名称</span>
                    <span>农贸市场</span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="fontDiv">
                    <span>单位所在地区</span>
                    <span>江苏省-南京市-鼓楼区</span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="fontDiv">
                    <span>所属行业</span>
                    <span>
信息传输、计算机服务和软件业</span>
                  </div>
                </el-col>
              </el-row>
              <!-- 第三行 -->
              <el-row>
                <el-col :span="6">
                  <div class="fontDiv">
                    <span>技术系列</span>
                    <span>技术员</span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="fontDiv">
                    <span>资格专业</span>
                    <span>农民技术员</span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="fontDiv">
                    <span>专业技术资格名称</span>
                    <span>农民技术员</span>
                  </div>
                </el-col>
              </el-row>
              <!-- 第四行 -->
              <el-row>
                <el-col :span="6">
                  <div class="fontDiv">
                    <span>获取资格时间</span>
                    <span>202020</span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="fontDiv">
                    <span>聘任时间</span>
                    <span>2202020</span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="fontDiv">
                     <span>专业技术职务证书</span>
                     <br>
      <div class="demo-image">
        <div class="block" v-for="fit in fits" :key="fit">
          <span class="demonstration">{{ fit }}</span>
          <el-image
            style="width: 100px; height: 100px"
            :src="url"
            :fit="fit"></el-image>
        </div>
      </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>

        <!-- 右边的步骤条 -->
        <el-col :span="6">
          <div>
            <h4 style="margin-bottom:20px">处理进度</h4>
            <div style="height: 300px;">
              <el-steps direction="vertical" :active="1">
                <el-step title="【单位】发起人员迁入迁出" description="xx单位"></el-step>
                <el-step title="【行业主管】审批" description="xx单位"></el-step>
                <el-step title="完成"></el-step>
              </el-steps>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
   data() {
      return {
        fits: ['fill'],
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
      }
}}
</script>
<style scoped lang="less">
.el-row {
    height: 40px;
    // line-height: 40px;
}
.fontDiv {
    width: 320px;
    position: relative;
}
.fontDiv > span:first-child {
  font-size: 12px;
  color: #999;

  position: absolute;
  width: 120px;
  text-align: right;
  text-align-last: right;
//   left: 0;
//   top: 0;
}
.fontDiv > span:first-child:before {
  position: absolute;
  left: 100%;
  content: "\FF1A";
}
.fontDiv > span:last-child {
  font-size: 12px;
  padding-left: 40%;
  color: #000;
}
.see_css {
  width: 110px;
  text-align: center;
  height: 20px;
  font-size: 14px;
  line-height: 20px;
  background-color: #ecf0fc;
  margin: 20px 30px 0;
}
.record_css {
  margin: 20px 30px 0;
}
</style>